<template>
	<view>
		<view class="tabs">
			<u-tabs
				:list="list1"
				lineColor="#4BC264"
				@change="change"
				:current="current"
				:activeStyle="{
					color: '#1C274C',
					fontWeight: 'bold',
					transform: 'scale(1.02)'
				}"
				:inactiveStyle="{
					color: '#A4A9B7',
					transform: 'scale(1)'
				}"
				itemStyle="padding-left: 30px; padding-right: 30px; height: 42px;"
			></u-tabs>
		</view>
		
		<template v-if="current == 0">
			<view class="yhq-each">
				<view class="money">
					￥<text>10</text>
				</view>
				<view class="hint-r">
					<view class="Full-minus">满 <text>100</text> 元可减 <text>10</text> 元</view>
					<view class="time">有效期至：2024年12月12日</view>
				</view>
			</view>
		</template>
		
		
		<template v-if="current">
			<view class="yhq-each2" v-for="i in 2">
				<view class="money">
					￥<text>10</text>
				</view>
				<view class="hint-r">
					<view class="Full-minus">满 <text>100</text> 元可减 <text>10</text> 元</view>
					<view class="time">有效期至：2024年12月12日</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					{
						name: '未使用'
					},
					{
						name: '已使用'
					},
					{
						name: '已过期'
					}
				],
				current:0
			}
		},
		methods: {
			change(e) {
				console.log(e);
				this.current = e.index;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
	.tabs {
		padding: 0 32rpx;
		display: flex;
		justify-content: center;
	}
	
	.yhq-each {
		padding: 32rpx;
		width: 622rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: auto;
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		color: #A4A9B7;
		.money {
			font-weight: bold;
			font-size: 30rpx;
			color: #4BC264;
			text {
				font-size: 56rpx;
			}
			margin-right: 32rpx;
		}
		.hint-r {
			.Full-minus {
				font-weight: bold;
				font-size: 30rpx;
				color: #1C274C;
				text {
					color: #4BC264;
				}
			}
			.time {
				font-weight: 500;
				font-size: 22rpx;
				color: #A4A9B7;
				margin-top: 16rpx;
			}
		}
	}
	
	.yhq-each2 {
		padding: 32rpx;
		width: 622rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: auto;
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		color: #A4A9B7;
		.money {
			font-weight: bold;
			font-size: 30rpx;
			
			text {
				font-size: 56rpx;
			}
			margin-right: 32rpx;
		}
		.hint-r {
			.Full-minus {
				font-weight: bold;
				font-size: 30rpx;
				text {
					
				}
			}
			.time {
				font-weight: 500;
				font-size: 22rpx;
				color: #A4A9B7;
				margin-top: 16rpx;
			}
		}
	}
</style>
